<template>
  <main id="home" class="view">
    <img class="nyImg" src="../../assets/images/n1.jpg" />
    <img class="nyImg" src="../../assets/images/n2.jpg" />
    <img class="nyImg" src="../../assets/images/n3.jpg" />
    <img class="nyImg" src="../../assets/images/n4.jpg" />
    <img class="nyImg" src="../../assets/images/n5.jpg" />
    <!-- mobile -->
    <div class="msgBox">
      <div class="inputArea">
        <div class="item">
          <label>姓名</label>
          <el-input style="width: 3.4rem" v-model="name" placeholder="请输入姓名"></el-input>
        </div>
        <div class="item" style="margin-top:.2rem">
          <label>手机号码</label>
          <el-input style="width: 3.4rem" v-model="phone" placeholder="请输入手机号码"></el-input>
        </div>
        <div class="joinButton" @click="submit">提交并获取加盟资料</div>
      </div>
      <img class="nyImg" style="vertical-align: middle" src="../../assets/images/n6.jpg" />
    </div>
    <div class="mobile">
      <div class="submit" @click="phoneCall" style="margin-right:.16rem">拨打VIP专线</div>
      <div class="submit" @click="scrollTo">获取加盟资料</div>
    </div>
  </main>
</template>

<script>
import { Button, Toast } from "mand-mobile";

export default {
  name: "App",
  components: {
    [Button.name]: Button
  },
  data() {
    return {
      name: "",
      phone: ""
    };
  },
  methods: {
    handleClick() {
      Toast.info("不错哟~");
    }
  }
};
</script>

<style lang="stylus" scoped>
.nyImg {
  width: 100%;
}

.inputArea {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 3.95rem;
  align-items: center;
  justify-content: center;
}

.msgBox {
  position: relative;
  margin-bottom: 1rem;
}

.mobile {
  display: flex;
  position: fixed;
  bottom: 0;
  padding: 0.2rem 0;
  justify-content: center;
  background: #eb9500;
  width: 100%;
}

.submit {
  background: #fff;
  border-radius: 0.08rem;
  border: none;
  border-radius: 0.8rem;
  font-size: 0.24rem;
  font-weight: bold;
  width: 2.2rem;
  text-align: center;
  height: 0.7rem;
  line-height: 0.7rem;
}

.item {
  display: flex;
  align-items: center;

  label {
    width: 1.6rem;
    font-size: 0.28rem;
  }
}
</style>
